<template>
  <div>
    <h3>vue动画</h3>
    <!--
        单元素动画
           动画条件：进入、离开( v-if/v-show )
           实现：
              1：用transition包住动画元素
              2：加入name='值'
              3:定义css
                  name的值就是css的class前缀
                  .xxx-enter-active:承载transition/animation,进入过程中一直存在的class
                  .xxx-enter:用于进入动作属性改变，进入过程中希望从什么状态变到正常状态
                  .xxx-leave-active:承载transition/animation,离开过程中一直存在的class
                  .xxx-leave-to:用于离开动作属性改变，离开过程中希望从正常状态谈到什么状态
     -->
    <button @click="bol=!bol">切换</button>

    <transition name="xxx">
      <div v-if="bol" class="box" />
    </transition>

    <hr>
    <button @click="show=!show">切换</button>
    <transition name="abc">
      <div v-if="show" class="box2" />
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bol: true,
      show: true
    }
  }
}
</script>
<style>
.box,.box2{
    width: 300px;
    height: 300px;
    background-color: #f00;
    margin:0 auto;
}
/* 纯css动画：
      1:属性改变
      2：transition/animation
*/
.xxx-enter,.xxx-leave-to{
    width: 0;
    height: 0;
    opacity: 0;
}
.xxx-enter-active,.xxx-leave-active{
    transition: all 0.5s;
}

.abc-enter-active,.abc-leave-active{
   transition: all 0.5s;
}
.abc-enter{
    opacity: 0;
    transform: translateX(-300px);
}
.abc-leave-to{
    opacity: 0;
    transform: translateX(300px);
}

</style>
